<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		* { margin: 0; padding: 0; line-height: 200% }
		h1 { font-size: 20px; margin-top: 20px }

	</style>
</head>
<body>
	<h1>员工查询</h1>
	<label>请输入员工编号：</label>
	<input type="text" id="keyword" name="" />
	<button id="search">查询</button><br>
	<p id="searchResult"></p>


	<h1>员工创建</h1>
	<label>请输入员工姓名：</label>
	<input type="text" id="staffName" /><br>

	<label>请输入员工编号：</label>
	<input type="text" id="staffNumber" /><br>

	<label>请输入员工姓别：</label>
	<select id="staffSex">
		<option>男</option>
		<option>女</option>
	</select><br>

	<label>请输入员工职位：</label>
	<input type="text" id="staffJob" /><br>

	<button id="save">保存</button><br>
	<p id="createResult"></p>

	<script>
	window.onload = function(){
		var oSearch = document.getElementById("search");
		var oKey = document.getElementById("keyword");
		var searchResult = document.getElementById("searchResult");
		var createResult = document.getElementById("createResult");
		var oSave = document.getElementById("save");

		// 查询员工
		oSearch.onclick = function(){
			// 发送ajax查询请求并处理
			var request = new XMLHttpRequest();
			request.open("GET","service.php?number=" + oKey.value,true);
			request.send();
			request.onreadystatechange = function(){
				if(request.readyState === 4){
					if(request.status === 200){
						searchResult.innerHTML = request.responseText;
					}else{
						alert("发生错误：" + request.status);
					}
				}
			};
		};


		// 新建员工
		oSave.onclick = function(){
			// 发送ajax查询请求并处理
			var request = new XMLHttpRequest();
			request.open("POST","service.php",true);
			var data = "name=" + document.getElementById("staffName").value
						+"&number=" + document.getElementById("staffNumber").value
						+"&sex=" + document.getElementById("staffSex").value
						+"&job=" + document.getElementById("staffJob").value;
			request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			request.send(data);
			request.onreadystatechange = function(){
				if(request.readyState === 4){
					if(request.status === 200){
						createResult.innerHTML = request.responseText;
					}else{
						alert("发生错误：" + request.status);
					}
				}
			};
		};
	}
	</script>
</body>
</html>